<div id="hotelMainDiv">
    <h4>酒店基础信息</h4>
    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>酒店名称</h5>
            <div class="form-group">
                <label for="hotelName">酒店名称</label>
                <input type="text" class="form-control" id="hotelName" placeholder="请填写酒店名称"
                       v-model:value="hotelMain.hotelName">
            </div>
        </div>
    </div>

    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>酒店所在城市</h5>
            <div class="form-group">
                <select onchange="changeProvince()" id="province" v-model:value="hotelMain.province">
                    <option>请选择所在省份</option>
                    <option v-for="province in provinces" v-bind:value="province.id">{{province.name}}</option>
                </select>
                <select onchange="changeCity()" id="city" v-model:value="hotelMain.city">
                    <option>请选择所在城市</option>
                    <option v-for="city in cities" :value="city.id">{{city.name}}</option>
                </select>
                <select onchange="changeArea()" id="area" v-model:value="hotelMain.area">
                    <option>请选择所在地区</option>
                    <option v-for="area in areas" :value="area.id">{{area.name}}</option>
                </select>
            </div>
        </div>
    </div>

    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>酒店经纬度</h5>
            <div class="form-group">
                <label>经度</label>
                <input type="number" step="0.1" v-model:value="hotelMain.longitude" id="longitude">
            </div>
            <div class="form-group">
                <label>纬度</label>
                <input type="number" step="0.1" v-model:value="hotelMain.latitude">
            </div>
            <div class="form-group">
                <label>请输入关键字</label>
                <input id="tipinput"/>
            </div>
            <div id="container"></div>
        </div>
    </div>

    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>酒店具体位置</h5>
            <div class="form-group">
                <label>具体位置</label>
                <input type="text" v-model:value="hotelMain.location" placeholder="请输入酒店具体位置" class="form-control">
            </div>
        </div>
    </div>

    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <h5>酒店星级</h5>
            <div class="form-group">
                <select id="hotelStar" v-model:value="hotelMain.hotelStar">
                    <option v-for="(item,index) in 6" :value="index">
                        {{index}}
                    </option>
                </select>
                星级
            </div>
        </div>
    </div>


    <div class="card" style="width: 90%;margin: 30px auto auto;">
        <div class="card-body">
            <button type="button" class="btn-primary" onclick="saveHotelMain()">保存</button>
        </div>
    </div>
</div>

<!--高德地图-->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=fa89861b3f18b12b40dd4d9b828090bc"></script>

<style>
    #container {
        width: 100%;
        height: 600px;
    }
</style>

<script>
    var hotelMainVue = new Vue({
        el: "#hotelMainDiv",
        data: {
            hotelMain: {
            },
            provinces: [],
            cities: [],
            areas: []
        },
        methods: {
            initPage: function () {
                var self = this;
                $.ajax({
                    url: "/api/hotelMain/" + $("#userId").val(),
                    type: "get",
                    success: function (rs) {
                        console.log(rs);
                        self.hotelMain = rs;
                        self.map();
                        self.initProvinces();
                        self.initCities();
                        self.initAreas();
                    }
                })
            },
            initProvinces: function () {
                var self = this;
                $.ajax({
                    url: "/api/cities/0",
                    type: "get",
                    success: function (rs) {
                        self.provinces = rs;
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
            initCities: function () {
                var self = this;
                $.ajax({
                    url: "/api/cities/" + self.hotelMain.province,
                    type: "get",
                    success: function (rs) {
                        self.cities = rs;
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
            initAreas: function () {
                var self = this;
                $.ajax({
                    url: "/api/cities/" + self.hotelMain.city,
                    type: "get",
                    success: function (rs) {
                        self.areas = rs;
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
            changeProvince: function () {
                var self = this;
                self.hotelMain.province = $("#province").val();
                $.ajax({
                    url: "/api/cities/" + self.hotelMain.province,
                    type: "get",
                    success: function (rs) {
                        self.cities = rs;
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
            changeCity: function () {
                var self = this;
                self.hotelMain.city = $("#city").val();
                $.ajax({
                    url: "/api/cities/" + self.hotelMain.city,
                    type: "get",
                    success: function (rs) {
                        self.areas = rs;
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
            changeArea: function () {
                var self = this;
                self.hotelMain.area = $("#area").val();
            },
            map: function () {
                var self = this;
                //地图加载
                var map = new AMap.Map("container", {
                    center: [self.hotelMain.longitude, self.hotelMain.latitude],
                    zoom: 13,//级别
                    resizeEnable: true
                });
                //输入提示
                var autoOptions = {
                    input: "tipinput"
                };

                var marker = new AMap.Marker({
                    position: [self.hotelMain.longitude, self.hotelMain.latitude]//位置
                })
                map.add(marker);//添加到地图

                AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () {
                    var auto = new AMap.AutoComplete(autoOptions);
                    var placeSearch = new AMap.PlaceSearch({
                        map: map
                    });  //构造地点查询类
                    auto.on("select", select);//注册监听，当选中某条记录时会触发
                    function select(e) {
                        placeSearch.setCity(e.poi.adcode);
                        placeSearch.search(e.poi.name);  //关键字查询查询
                    }
                });


                map.on('click', function (ev) {
                    map.remove(marker);
                    // 触发事件的地理坐标，AMap.LngLat 类型
                    var lnglat = ev.lnglat;
                    self.hotelMain.longitude = ev.lnglat.KL;
                    self.hotelMain.latitude = ev.lnglat.kT;
                    marker = new AMap.Marker({
                        position: [self.hotelMain.longitude, self.hotelMain.latitude]//位置
                    });
                    map.add(marker);//添加到地图
                });
            },
            saveHotelMain: function () {
                var self = this;
                self.hotelMain.hotelStar = $("#hotelStar").val();
                console.log(self.hotelMain);

                if (self.hotelMain.hotelName === "") {
                    layer.alert("请输入酒店名称", {icon: 0});
                } else if (self.hotelMain.province === 0 || self.hotelMain.city === 0 || self.hotelMain.area === 0) {
                    layer.alert("请选择酒店所在城市", {icon: 0});
                } else if (self.hotelMain.longitude === 116.39784780487156 && self.hotelMain.latitude === 39.9151969248441) {
                    layer.alert("请修改酒店所在经纬度", {icon: 0});
                } else if (self.hotelMain.location === "") {
                    layer.alert("请输入酒店具体的地址", {icon: 0});
                } else {
                    console.log(self.hotelMain)
                    $.ajax({
                        url: "/api/hotelMain",
                        type: "put",
                        contentType: "application/json",
                        data: JSON.stringify(self.hotelMain),
                        success: function (rs) {
                            if (rs.status === 200) {
                                console.log("提交成功")
                            } else {
                                layer.alert(rs.message, {icon: 0});
                            }
                        },
                        error: function (rs) {
                            layer.alert(rs.responseText, {icon: 0});
                        }
                    })
                }
            },
        },
        created: function () {
            window.changeProvince = this.changeProvince;
            window.changeCity = this.changeCity;
            window.changeArea = this.changeArea;
            window.saveHotelMain = this.saveHotelMain;
        },
        mounted: function () {
            this.initPage();
        }
    })
</script>